<template>
  <div>
    <el-dialog
      :title="titlecom"
      :visible.sync="dialogFormVisible"
      width="1200px"
    >
      <el-form
        :model="form"
        label-width="100px"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="form.price" class="specificationInput"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item
              label="省"
              :label-width="formLabelWidth"
              prop="category1Id"
              v-if="this.qubie == 0"
            >
              <!-- 通过:value和v-model收集item项商品的id -->
              <el-select
                v-model="form.category1Id"
                placeholder="请选择省"
                :disabled="isShowselect1"
              >
                <el-option
                  v-for="a in reqCategory1"
                  :key="a.id"
                  :label="a.name"
                  :value="a.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6">
            <el-form-item label="市" prop="category2Id" v-if="this.qubie == 0">
              <el-select
                v-model="form.category2Id"
                placeholder="请选择市"
                :disabled="isShowselect2"
              >
                <el-option
                  v-for="item in reqCategory2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="区" prop="category3Id" v-if="this.qubie == 0">
              <el-select
                v-model="form.category3Id"
                placeholder="请选择区"
                :disabled="isShowselect3"
              >
                <el-option
                  v-for="c in reqCategory3"
                  :key="c.id"
                  :label="c.name"
                  :value="c.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="一级分佣比例 （百分比）"
          :label-width="formLabelWidth"
          prop="divide1"
        >
          <el-input
            v-model="form.divide1"
            class="specificationInput"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="二级分佣比例 （百分比）"
          :label-width="formLabelWidth"
          prop="divide2"
        >
          <el-input
            v-model="form.divide2"
            class="specificationInput"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="三级分佣比例 （百分比）"
          :label-width="formLabelWidth"
          prop="divide3"
        >
          <el-input
            v-model="form.divide3"
            class="specificationInput"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="一共几个小时"
          :label-width="formLabelWidth"
          prop="hour"
        >
          <el-input v-model="form.hour" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item
          label="发单端提成比例"
          :label-width="formLabelWidth"
          prop="bill"
        >
          <el-input v-model="form.bill" class="specificationInput"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth" prop="danwei">
          <el-input v-model="form.danwei" class="specificationInput"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="quedingtianjia('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getcitylist,
  updateserveguigeupdate,
  addserveguigeadd,
} from "@/api/serveguigelist";

import EditorBar from "@/components/Editor";
import draggable from "vuedraggable";

export default {
  components: {
    EditorBar,
    draggable,
  },
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "200px",
      form: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        price: "",
        name: "",
        cityid: "",
        title: "",
        divide1: "",
        divide2: "",
        divide3: "",
        serveid: "",
        hour: "",
        bill: "",
        danwei: "",
      },
      dialogVisible1: false,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        category1Id: [{ required: true, message: "请选择省", trigger: "blur" }],
        category2Id: [{ required: true, message: "请选择市", trigger: "blur" }],
        category3Id: [
          {
            required: true,
            message: "请选择区",
            trigger: "blur",
          },
        ],
        divide1: [
          {
            required: true,
            message: "请输入一级分佣比例 （百分比）",
            trigger: "blur",
          },
        ],
        divide2: [
          {
            required: true,
            message: "请输入二级分佣比例 （百分比）",
            trigger: "blur",
          },
        ],
        divide3: [
          {
            required: true,
            message: "请输入三级分佣比例 （百分比）",
            trigger: "blur",
          },
        ],
        hour: [
          {
            required: true,
            message: "请输入小时",
            trigger: "blur",
          },
        ],
        bill: [
          {
            required: true,
            message: "请输入发单端提成比例",
            trigger: "blur",
          },
        ],
        danwei: [
          {
            required: true,
            message: "请输入单位",
            trigger: "blur",
          },
        ],
      },
      qubie: 0,
      // 省
      reqCategory1: [],
      // 市
      reqCategory2: [],
      // 区
      reqCategory3: [],
      // 第一个下拉框
      isShowselect1: false,
      // 第二个下拉框
      isShowselect2: false,
      isShowselect3: false,
    };
  },
  methods: {
    // 获取省市区列表
    async getcitylist1() {
      let result = await getcitylist();
      console.log(result);
      if (result.code == 0) {
        this.reqCategory1 = result.data;
      }
    },
    add(val) {
      this.form = {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        price: "",
        name: "",
        cityid: "",
        title: "",
        divide1: "",
        divide2: "",
        divide3: "",
        serveid: "",
        hour: "",
        bill: "",
        danwei: "",
      };
      this.form.serveid = val.serveid;
      this.getcitylist1();
      this.qubie = 0;
      this.dialogFormVisible = true;
    },
    edit(val) {
      this.form = {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        price: "",
        name: "",
        cityid: "",
        title: "",
        divide1: "",
        divide2: "",
        divide3: "",
        serveid: "",
        hour: "",
        bill: "",
        danwei: "",
      };
      this.form.serveid = val.serveid;
      this.getcitylist1();
      this.qubie = 1;
      this.$nextTick(() => {
        // this.form = Object.assign(this.form, val);
        this.form.id = val.id;
        this.form.serveid = val.serveid;
        this.form.price = val.price;
        this.form.name = val.name;
        this.form.title = val.title;
        this.form.cityid = val.cityid;
        this.form.divide1 = val.divide1;
        this.form.divide2 = val.divide2;
        this.form.divide3 = val.divide3;
        this.form.hour = val.hour;
        this.form.bill = val.bill;
        this.form.danwei = val.danwei;

        console.log("则该库", this.form);
      });
      this.dialogFormVisible = true;
      this.cityid = val.category3Id;
    },
    // 关闭
    handleClose() {
      this.dialogFormVisible = false;
      this.$emit("refresh");
    },

    async quedingtianjia(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.qubie == 0) {
            let param = {
              serveid: parseInt(this.form.serveid),
              price: parseFloat(this.form.price),
              name: this.form.name,
              title: this.form.title,
              cityid: parseInt(this.form.cityid),
              divide1: parseInt(this.form.divide1),
              divide2: parseInt(this.form.divide2),
              divide3: parseInt(this.form.divide3),
              bill: parseInt(this.form.bill),
              danwei: this.form.danwei,
            };
            console.log(param);
            let result = await addserveguigeadd(param);
            if (result.code == 0) {
              this.$message({
                message: `添加规格成功`,
                type: "success",
              });
              this.handleClose();
            }
          } else if (this.qubie == 1) {
            let param = {
              id: parseInt(this.form.id),
              serveid: parseInt(this.form.serveid),
              price: parseFloat(this.form.price),
              name: this.form.name,
              title: this.form.title,
              cityid: parseInt(this.form.cityid),
              divide1: parseInt(this.form.divide1),
              divide2: parseInt(this.form.divide2),
              divide3: parseInt(this.form.divide3),
              hour: parseInt(this.form.hour),
              bill: parseInt(this.form.bill),
              danwei: this.form.danwei,
            };
            let result = await updateserveguigeupdate(param);
            if (result.code == 0) {
              this.$message({
                message: `修改规格成功`,
                type: "success",
              });
              this.handleClose();
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  watch: {
    "form.category1Id": {
      handler(newVal) {
        if (newVal) {
          // console.log(newVal);
          // console.log(this.reqCategory1);

          let arr = this.reqCategory1.filter((item) => item.id == newVal);
          // console.log(arr);
          this.reqCategory2 = arr[0].List;

          this.form.category2Id = "";
          this.form.category3Id = "";
          this.form.cityid = newVal;

          this.getcitylist1();
        }
      },
      deep: true,
      // immediate: true,
    },
    "form.category2Id": {
      handler(newVal) {
        console.log(newVal);
        if (newVal) {
          let arr = this.reqCategory2.filter((item) => item.id == newVal);
          this.reqCategory3 = arr[0].List;
          console.log("啊啊啊啊啊啊啊啊啊", this.reqCategory3);

          // console.log(newVal);
          this.form.category3Id = "";
          this.form.cityid = newVal;
          this.getcitylist1();
        }
      },
      deep: true,
      // immediate: true,
    },
    "form.category3Id": {
      handler(newVal) {
        if (newVal) {
          this.form.cityid = newVal;
          this.getcitylist1();
        }
      },
      deep: true,
      // immediate: true,
    },
  },
  computed: {
    titlecom() {
      if (this.qubie == 0) {
        return "添加规格";
      } else {
        return "修改规格";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.specificationInput {
  width: 250px;
}
.avatar-uploader-icon[data-v-22a48a68] {
  border: 1px dashed #d9d9d9;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 148px;
  height: 148px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.specificationInput {
  width: 250px;
}

.addguigeBtn {
  margin-left: 100px;
  margin-bottom: 22px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 180px;
  height: 180px;
  line-height: 180px;
  text-align: center;
}

.avatar {
  width: 180px;
  height: 180px;
  display: block;
}
v-deep .el-upload--picture-card {
  width: 200px !important;
  height: 200px !important;
}
.specificationInput1 {
  width: 150px;
}
</style>
